<template>
  <div class="region-list buy-page">
    <div class="header">
      <div class="header-input">
        <img class="search-left" @click="goBackMain" src="../../../static/left.png" alt="">
        <input class="search-input"  :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''" onfocus="this.blur();" :value="getInfoValue" @click.self.prevent="showIfram" type="text"
               :placeholder="$t('m.PropertyName') + '/' + $t('m.Street')">
      </div>
      <div class="line-white"></div>
      <mt-tabbar v-model="selected">
        <mt-tab-item class="tab-box" id="0" @click.native="onClicktab(0)">
          {{$t('m.Location')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="1" @click.native="onClicktab(1)">
          {{$t('m.Type')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="2" @click.native="onClicktab(2)">
          {{$t('m.Price')}} <span class="san-box"></span>
        </mt-tab-item>
        <mt-tab-item class="tab-box" id="3" @click.native="onClicktab(3)">
          {{$t('m.Room')}} <span class="san-box"></span>
        </mt-tab-item>
      </mt-tabbar>
    </div>

    <!--列表区域-->
    <div class="list-box">
      <mt-loadmore :top-method="reFreshList" topPullText="" topDropText="" topLoadingText="" ref="loadmore"
                   v-infinite-scroll="loadMoreItems"
                   infinite-scroll-disabled="loading"
                   infinite-scroll-distance="50" class="list-items">
        <div class="buy-list" v-for="item in tableData" @click="goToDetail(item.developmentId)">
          <div class="buy-list-box">
            <div class="buy-img-box">
              <img v-lazy="item.photoUrl" class="buy-img" :style="defaultImage" alt=""/>
            </div>
            <div class="buy-info-box">
              <p class="title" v-if="item.developmentName">{{ item.developmentName?translateUTZaw(item.developmentName) :''}}</p>
              <p v-if="item.propertyTypeId">{{getPropertytype(item.propertyTypeId)}}/{{getSubPropertytype(item.propertySubTypeId)}}</p>
              <p>{{ item.street?translateUTZaw(item.street)+',' :'' }}{{getTownshipId(item.townshipId)}},{{getregionId(item.regionId)}}</p>
              <p>{{getConstructionStatus(item.constructionStatus)}}{{item.constructionStatusOtherDesc ? ','+translateUTZaw(item.constructionStatusOtherDesc):''}}</p>
              <p v-if="item.completionDate">{{dateFormat(item.completionDate)}}</p>
              <p class="price-box-usd"><span v-if="getPrice(item.developmentsUnitsList, item.currencyId)">{{$t('m.Pricefrom')}}:</span><span class="development-price">{{getPrice(item.developmentsUnitsList, item.currencyId)}}</span></p>
            </div>
          </div>
        </div>
        <div class="loading-more-box" v-if="loading">
          <mt-spinner :type="3" class="loading-more"></mt-spinner>
        </div>
        <div v-if="pageData.pageNum >= pageInfo.totalPages" class="no-data">No data</div>
      </mt-loadmore>
    </div>

    <!--顶部input搜索-->
    <div class="search-ifram" v-show="iframShow">
      <mt-radio
        title="Search"
        v-model="radioValue"
        :options="options">
      </mt-radio>
      <div class="info-input-box">
        <input
          class="info-input"
          :class="$store.state.localLang == 'MM' ? 'fontsforweb_fontid_40615' : ''"
          v-model="infoValue"
          cancel-text=""
          placeholder="">
      </div>
      <div class="btn-box">
        <mt-button @click="hideIfram" style="padding: 0 12px!important;" type="default" class="button Back-btn">{{$t('m.Back')}}</mt-button>
        <mt-button type="default" style="padding: 0 12px!important;" class="button" @click="onSearch">{{$t('m.Search')}}</mt-button>
      </div>
    </div>

    <!--location 选择层-->
    <mt-popup
      v-model="LocationPopupVisible"
      style="width: 100%;height: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="township-box">
        <li class="township-box-wrap" v-for="item in townshipCurrent"
            @click="clickTownshipItem($event, item.value, item.text)">
          <div class="township-item location-item">{{item.text}}</div>
        </li>
      </ul>
    </mt-popup>

    <!--Type 选择层-->
    <mt-popup
      v-model="typePopupVisible"
      style="width: 100%;overflow: auto;"
      :closeOnClickModal="false"
      class="popup-wrap"
      position="bottom">
      <div style="padding: .05rem; overflow: hidden; margin-top: .1rem">
        <mt-button class="confirm-btn" @click="onConfirm" type="default">{{$t('m.Confirm')}}</mt-button>
        <mt-button class="reset-btn" @click="onReset" type="default">{{$t('m.Cancel')}}</mt-button>
      </div>
      <mt-picker :slots="slots" @change="onSoltValuesChange"></mt-picker>
    </mt-popup>

    <!--Price 选择层-->
    <mt-popup
      v-model="PricePopupVisible"
      style="width: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <ul class="township-box">
        <li class="price-box-wrap" v-for="item in PriceArr"
            @click="clickPriceItem($event, item.value, item.text)">
          <div class="township-item">{{item.text}}</div>
        </li>
      </ul>
      <div class="price-box">
        <input class="price-input" v-model="searchForm.priceMin" type="text">
        <span>-</span>
        <input class="price-input" v-model="searchForm.priceMax" type="text">
        <span>Lks</span>
        <mt-button class="confirm-btn" style="width: .9rem"  @click="onPriceConfirm" type="default">{{$t('m.Confirm')}}</mt-button>
        <mt-button class="reset-btn" style="width: .9rem; margin-right: .05rem"  @click="onPriceCancel" type="default">{{$t('m.Cancel')}}</mt-button>
      </div>
    </mt-popup>

    <!--Room 选择层-->
    <mt-popup
      v-model="RoomPopupVisible"
      style="width: 100%; overflow: auto;"
      class="popup-wrap"
      position="bottom">
      <div class="room-box">
        <div class="room-title">{{$t('m.Totalbedrooms')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapTotalRoom(0)"
              :class="totalBedroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(1)"
              :class="totalBedroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(2)"
              :class="totalBedroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(3)"
              :class="totalBedroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(4)"
              :class="totalBedroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(5)"
              :class="totalBedroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapTotalRoom(6)"
              :class="totalBedroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{totalBedroomsArr[6].text}}
          </li>
        </ul>

        <div class="room-title">{{$t('m.MasterBedroom')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapMasterRoom(0)"
              :class="masterBedroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(1)"
              :class="masterBedroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(2)"
              :class="masterBedroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(3)"
              :class="masterBedroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(4)"
              :class="masterBedroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(5)"
              :class="masterBedroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapMasterRoom(6)"
              :class="masterBedroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{masterBedroomsArr[6].text}}
          </li>
        </ul>

        <div class="room-title">{{$t('m.Bathroom')}}</div>
        <ul class="total-rooms-item-box">
          <li class="total-rooms-item" @click="onTapBathRoom(0)"
              :class="bathroomsArr[0].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[0].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(1)"
              :class="bathroomsArr[1].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[1].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(2)"
              :class="bathroomsArr[2].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[2].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(3)"
              :class="bathroomsArr[3].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[3].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(4)"
              :class="bathroomsArr[4].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[4].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(5)"
              :class="bathroomsArr[5].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[5].text}}
          </li>
          <li class="total-rooms-item" @click="onTapBathRoom(6)"
              :class="bathroomsArr[6].checked ? 'total-rooms-item-ed' : 'total-rooms-item' ">
            {{bathroomsArr[6].text}}
          </li>
        </ul>

        <div class="select-rooms-box">
          <mt-button  style="width: 1rem; margin-right: .1rem;" @click="onRoomCancel" type="default">{{$t('m.Cancel')}}</mt-button>
          <mt-button @click="onConfirmRooms" class="select-rooms-bo-confirm" type="default">{{$t('m.Confirm')}}</mt-button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>


  import {searchDevelopmentList} from '../../api/zxy_api'
  import qs from 'qs'

  // 英文json
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import regions from '@/json/region'
  import townships from '@/json/township'
  import buySort from '@/json/buySort'

  // 缅甸文json
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_regions from '@/mmJson/region'
  import mm_townships from '@/mmJson/township'
  import mm_buySort from '@/mmJson/buySort'


  // 缅甸文json  unicode
  import mmu_propertyType from '@/mmUnicodeJson/propertyType'
  import mmu_propertySubType from '@/mmUnicodeJson/propertySubType'
  import mmu_regions from '@/mmUnicodeJson/region'
  import mmu_townships from '@/mmUnicodeJson/township'
  import mmu_buySort from '@/mmUnicodeJson/buySort'


  export default {
    name: 'Buy',
    data() {
      return {
        // regions: regions,
        regionId: 2,
        loading: false,
        list: [1, 2, 3, 43, 432, 543, 65, 4654, 6456],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        searchValue: '',
        radioValue: 'propertyName',
        infoValue: '',
        getInfoValue: '',
        iframShow: false,
        selected: '',
        LocationPopupVisible: false,
        townshipIdSelsected: '',
        townshipValue: 'Location',
        typePopupVisible: false,
        propertyTypeId: '',
        propertySubTypeId: '',
        picker: '',
        PricePopupVisible: false,
        RoomPopupVisible: false,
        totalBedroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],
        masterBedroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],
        bathroomsArr: [
          {text: 'Any', value: 'Any', checked: true},
          {text: '0', value: '0', checked: false},
          {text: '1', value: '1', checked: false},
          {text: '2', value: '2', checked: false},
          {text: '3', value: '3', checked: false},
          {text: '4', value: '4', checked: false},
          {text: '5+', value: '5', checked: false},
        ],

        // 往下列表相关
        defaultImage: {
          backgroundImage: "url(" + require("../../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "auto 100%",
          backgroundPositionX: "center",
        },
        loading: false,
        // 搜索子段
        landSizeShow: false,
        townships: [],
        searchForm: {
          RegionID: 2,
          townshipId: [],
          propertyTypeId: '',
          propertySubTypeId: [],
          priceMin: '',
          priceMax: '',
        },
        moreForm: {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        },
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        showMore: false,
        showOther: true,
        // 列表数据
        tableData: [],
        sortForm: '',
        isRefresh: false,
      }
    },
    methods: {
      hideIfram: function () {
        this.iframShow = false;
      },
      showIfram: function () {
        this.iframShow = true;
        // this.infoValue = this.getInfoValue;
      },
      goBackMain: function () {
        // this.$router.push('main');
        history.back()
      },
      onSearch: function () {
        this.iframShow = false;
        this.getInfoValue = this.infoValue;
        // 调用搜索的接口
        this.getList(1)
        this.isRefresh = true;
      },
      // translateStreet(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.street;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.street,'zawgyiTounicode')
      //   }else {
      //     return item.street;
      //   }
      // },
      // translateDevelopmentName(item){
      //   if(this.$i18n.locale == 'MM'){
      //     return  item.developmentName;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(item.developmentName,'zawgyiTounicode')
      //   }else {
      //     return item.developmentName;
      //   }
      // },
      onClicktab: function (id) {
        if (id == 0) { // location
          let township = this.township;
          for (var t = 0; t < township.length; t++) {
            if (this.regionId == township[t].regionId) {
              this.townshipCurrent.push({value: township[t].value, text: township[t].text})
            }
          }
          // 如果是首次打开则将any 设置为黄色
          if (!this.townshipIdSelsected) {
            var arr = document.getElementsByClassName('township-box-wrap')
            // 设置当前的dom
            arr[0].style.background = '#FF9800'
            arr[0].style.color = '#fff'
          }
          this.LocationPopupVisible = true;
        } else if (id == 1) { // Type
          this.typePopupVisible = true;
        } else if (id == 2) { // Price
          this.PricePopupVisible = true;
        } else if (id == 3) {  // Room
          this.RoomPopupVisible = true;
        }
      },
      clickTownshipItem: function (event, value, text) { // 点击选择城镇
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('township-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        // 选择了城镇之后保存到state  并且loaction中做显示
        if (value == 'Any') {
          this.townshipIdSelsected = '';
          this.townshipValue = 'Location';
        } else {
          this.townshipIdSelsected = value;
          this.townshipValue = text;
        }

        this.LocationPopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },
      onSoltValuesChange(picker, values) {
        // 首先peropertyTypeId设置
        for (let i = 0; i < this.propertyType.length; i++) {
          if (this.propertyType[i].text == values[0]) {
            this.propertyTypeId = this.propertyType[i].value;
          }
        }

        let arrhh = []

        for (let i = 0; i < this.propertySubType.length; i++) {
          if (this.propertySubType[i].propertyTypeId == this.propertyTypeId) {
            arrhh.push(this.propertySubType[i].text)
          }
        }

        if(this.$store.state.localLang == 'MM'){
          arrhh.unshift('အားလံုး')
          if (values[0] === 'အားလံုး') {
            let arr = ['အားလံုး']
            picker.setSlotValues(1, arr);
          } else {
            picker.setSlotValues(1, arrhh);
          }
        }else {
          arrhh.unshift('Any')
          if (values[0] === 'Any') {
            let arr = ['Any']
            picker.setSlotValues(1, arr);
          } else {
            picker.setSlotValues(1, arrhh);
          }
        }

        // 设置选择的propertySubTypeId
        for (let i = 0; i < this.propertySubType.length; i++) {
          if (values[1] == this.propertySubType[i].text && this.propertySubType[i].propertyTypeId == this.propertyTypeId) {
            this.propertySubTypeId = this.propertySubType[i].value;
          }
        }

        this.picker = picker;
        console.log(values, '当前选择的文本', this.propertyTypeId, this.propertySubTypeId, '当前选择id')
        if(values[0] === 'Any' || values[0] === 'အားလံုး'){
          this.propertyTypeId = '';
          this.propertySubTypeId = '';
        }
        if(values[1] === 'Any' || values[1] === 'အားလံုး'){
          this.propertySubTypeId = '';
        }
      },
      onConfirm: function () {
        // 获取当前选中的picker vlues
        // 当值为 any any的时候清除id
        console.log(this.picker.getValues(), this.propertyTypeId, this.propertySubTypeId, '当前选中的值')
        this.getList(1)
        this.isRefresh = true;
        this.typePopupVisible = false;
      },
      onReset: function () {
        // 将数据全部重制为any
        // this.picker.setValues(['Any', 'Any'])
        this.typePopupVisible = false;
      },
      onPriceConfirm: function () {
        this.PricePopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },
      onPriceCancel: function () {
        this.PricePopupVisible = false;
      },
      onTapTotalRoom: function (index) {
        if (index == 0 && (this.totalBedroomsArr[0].checked == false)) {
          this.totalBedroomsArr[0].checked = true;
          for (let i = 1; i < this.totalBedroomsArr.length; i++) {
            this.totalBedroomsArr[i].checked = false;
          }
          return;
        }
        if (index > 0) {
          this.totalBedroomsArr[index].checked = !this.totalBedroomsArr[index].checked;
        }
        for (let i = 1; i < this.totalBedroomsArr.length; i++) {
          if (this.totalBedroomsArr[i].checked) {
            this.totalBedroomsArr[0].checked = false;
          }
        }
        console.log(this.totalBedroomsArr, '当前选中的total bedrooms')
      },
      onTapMasterRoom: function (index) {
        // 数据初始化
        for(let i=0;i< this.masterBedroomsArr.length; i++){
          this.masterBedroomsArr[i].checked = false;
        }

        if(index > 0){
          this.masterBedroomsArr[index].checked =  !this.masterBedroomsArr[index].checked;
        }else if(index == 0){
          for(let i=1;i< this.masterBedroomsArr.length; i++){
            if(!this.masterBedroomsArr[i].checked){
              this.masterBedroomsArr[0].checked = true;
            }
          }
        }

      },
      onTapBathRoom: function (index) {
        // 数据初始化
        for(let i=0;i< this.bathroomsArr.length; i++){
          this.bathroomsArr[i].checked = false;
        }

        if(index > 0){
          this.bathroomsArr[index].checked =  !this.bathroomsArr[index].checked;
        }else if(index == 0){
          for(let i=1;i< this.bathroomsArr.length; i++){
            if(!this.bathroomsArr[i].checked){
              this.bathroomsArr[0].checked = true;
            }
          }
        }
      },
      onConfirmRooms: function () {
        this.RoomPopupVisible = false;
        this.getList(1)
        this.isRefresh = true;
      },
      onRoomCancel: function () {
        this.RoomPopupVisible = false;
      },
      clickPriceItem: function ( event, value, text) {
        var e = event.currentTarget;
        // 清除其余选择态
        var arr = document.getElementsByClassName('price-box-wrap')
        for (let i = 0; i < arr.length; i++) {
          arr[i].style.background = '#fff'
          arr[i].style.color = '#2c3e50'
        }
        // 设置当前的dom
        e.style.background = '#FF9800'
        e.style.color = '#fff'

        if (value == 'Any') {
          this.searchForm.priceMin = '';
          this.searchForm.priceMax = '';
        } else {
          if(value < 100){
            this.searchForm.priceMax = 100;
          }else if(value == 100){
            this.searchForm.priceMin = 100;
            this.searchForm.priceMax = 200;
          }else if(value == 200){
            this.searchForm.priceMin = 200;
            this.searchForm.priceMax = 300;
          }else if(value == 300){
            this.searchForm.priceMin = 300;
            this.searchForm.priceMax = 400;
          }else if(value == 400){
            this.searchForm.priceMin = 400;
            this.searchForm.priceMax = 500;
          }else if(value == 500){
            this.searchForm.priceMin = 500;
            this.searchForm.priceMax = 600;
          }else if(value == 600){
            this.searchForm.priceMin = 600;
            this.searchForm.priceMax = 700;
          }else if(value == 700){
            this.searchForm.priceMin = 700;
            this.searchForm.priceMax = 800;
          }else if(value == 800){
            this.searchForm.priceMin = 800;
            this.searchForm.priceMax = 900;
          }else if(value == 900){
            this.searchForm.priceMin = 900;
            this.searchForm.priceMax = 1000;
          }else if(value > 1000){
            this.searchForm.priceMin = 1000;
          }
        }

        this.PricePopupVisible = false;
        this.getList(1);
        this.isRefresh = true;
      },

      // 往下列表相关
      reFreshList(){
        this.isRefresh = true
        this.getList(1)
        this.$refs.loadmore.onTopLoaded()
        return false
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getSubType(type) {
        // 首先处理部分dom 显示隐藏

        // 初始化
        // var arrShow = [
        //   {"value": 1, "text": "Apartment", "showland": false},
        //   {"value": 2, "text": "Condo", "showland": false},
        //   {"value": 3, "text": "House", "showland": true},
        //   {"value": 4, "text": "Land", "showland": true, "showOther": true},
        //   {"value": 8, "text": "Commercial", "showland": true}
        // ]

        if (this.searchForm.propertyTypeId == 1 || this.searchForm.propertyTypeId == 2) {
          this.landSizeShow = false
        } else {
          this.landSizeShow = true
        }

        if (this.searchForm.propertyTypeId == 4) {
          this.showOther = false
        } else {
          this.showOther = true
        }

        // 将more中数据初始化
        this.moreForm = {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        };

        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      toggleShowMore() {
        this.showMore = !this.showMore
      },
      getPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertyType) {
            if (id == t.value) {
              return t.text
              console.log(t.text)
            }
          }
        } else {
          for (var t of propertyType) {
            if (id == t.value) {
              console.log(t.text)
              return t.text
            }
          }
        }
      },
      getSubPropertytype(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of propertySubType) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getTownshipId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of townships) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getregionId(id) {
        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_regions) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          for (var t of regions) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      // translateConstruction(d){
      //   d = d || '';
      //   if(this.$i18n.locale == 'MM'){
      //     return d;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(d,'zawgyiTounicode')
      //   }else {
      //     return d;
      //   }
      // },
      onTotalBedroomsChange(val) {
        for (var i = 0; i < this.moreForm.totalBedrooms.length; i++) {
          if (this.moreForm.totalBedrooms[i] == 'Any') {
            if (this.moreForm.totalBedrooms[0] == 'Any' && val.length > 1) {
              this.moreForm.totalBedrooms.shift()
            } else {
              this.moreForm.totalBedrooms = ['Any']
            }
          }
        }
      },
      onToggleAny(val, name) {
        let arr = this.moreForm[name] || [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == 'Any') {
            if (arr[0] == 'Any' && val.length > 1) {
              this.moreForm[name].shift()
            } else {
              this.moreForm[name] = []
            }
          }
        }
      },
      onToggleAnySingle(val, name){
        if(val == 'Any'){
          this.moreForm[name] = ''
        }
      },
      goToDetail(id) {
        // const {href} = this.$router.resolve({
        //   name: 'foo',
        //   path: '/buyDetails',
        //   query: {
        //     id: id
        //   }
        // })
        // window.open(href, '_blank');
        this.$router.push({
          path:'/devDetails',
          query:{
            id: id
          }
        })
      },
      getConstructionStatus(id) {
        if (this.$store.state.localLang == 'MM') {
          let arr = [
            {'value': 1, 'text': 'တည္ေဆာက္ျခင္းမရွိပါ'},
            {'value': 2, 'text': 'ေဆာက္လုပ္ဆဲ'},
            {'value': 3, 'text': 'ေဆာက္လုပ္ျပီးစီး'}
          ]
          for (var t of arr) {
            if (id == t.value) {
              return t.text
            }
          }
        } else if(this.$store.state.localLang == 'MMU'){
          let arr =   [
            {'value': 1, 'text': 'တည်ဆောက်ခြင်းမရှိသေး'},
            {'value': 2, 'text': 'ဆောက်လုပ်ဆဲ'},
            {'value': 3, 'text': 'ဆောက်လုပ်ပြီးစီး'}
          ]
          for (var t of arr) {
            if (id == t.value) {
              return t.text
            }
          }
        } else {
          let arr = [
            {'value': 1, 'text': 'Not yet started'},
            {'value': 2, 'text': 'Building'},
            {'value': 3, 'text': 'Finished'}
          ]
          for (var t of arr) {
            if (id == t.value) {
              return t.text
            }
          }
        }
      },
      getList(pageNum) {

        if(pageNum == 1){
          this.pageData.pageNum = 1;
        }
        let searchForm = {};

        // 搜索子段处理

        // 搜索propertyname street listingId
        if(this.infoValue){ //如果infovalue 有值的情况下
          if(this.radioValue == 'propertyName'){
            searchForm.propertyName = this.translateZTUnicode(this.infoValue);
          }else if(this.radioValue == 'Street'){
            searchForm.street = this.translateZTUnicode(this.infoValue);
          }else if(this.radioValue == 'ListingID'){
            searchForm.listingId = this.translateZTUnicode(this.infoValue);
          }
        }

        if(this.searchForm.RegionID){
          searchForm.regionId = this.searchForm.RegionID
        }

        if(this.propertyTypeId){
          searchForm.propertyTypeId = this.propertyTypeId
        }

        if (this.townshipIdSelsected) {
          searchForm.townshipIdList = this.townshipIdSelsected;
        }
        if (this.propertySubTypeId) {
          searchForm.propertySubTypeIdList = this.propertySubTypeId
        }

        // minPrice
        if(this.searchForm.priceMin){
          searchForm.minUnitPrice = this.searchForm.priceMin
        }
        // maxPrice
        if(this.searchForm.priceMax){
          searchForm.maxUnitPrice = this.searchForm.priceMax
        }

        // more搜索子段处理

        if(!this.totalBedroomsArr[0].checked){
          let arr = [];
          for(let i=0;i< this.totalBedroomsArr.length;i++){
            if(this.totalBedroomsArr[i].checked){
              if(this.totalBedroomsArr[i].value != 5){
                arr.push(this.totalBedroomsArr[i].value)
              }
            }
          }
          searchForm.totalBedroomList = arr.join(',')
          if(this.totalBedroomsArr[6].checked){
            searchForm.minTotalBedroom = '5'
          }
        }

        // Master Bedroom
        if(!this.masterBedroomsArr[0].checked){
          if(this.masterBedroomsArr[1].checked){
            searchForm.masterBedroomList = 0;
          }else{
            for(let i=0;i<this.masterBedroomsArr.length;i++){
              if(this.masterBedroomsArr[i].checked && (i!=1)){
                searchForm.minMasterBedroom = this.masterBedroomsArr[i].value;
              }
            }
          }
        }

        // Bathroom
        if(!this.bathroomsArr[0].checked){
          if(this.bathroomsArr[1].checked){
            searchForm.bathroomList = 0;
          }else{
            for(let i=0;i<this.bathroomsArr.length;i++){
              if(this.bathroomsArr[i].checked && (i!=1)){
                searchForm.minBathroom = this.bathroomsArr[i].value;
              }
            }
          }
        }

        // Floor size
        if (this.moreForm.floorSizeList[0].minSize || this.moreForm.floorSizeList[0].maxSize) {
          searchForm['floorSizeList[0].minSize'] = this.moreForm.floorSizeList[0].minSize;
          searchForm['floorSizeList[0].maxSize'] = this.moreForm.floorSizeList[0].maxSize;
        }

        // Land size
        if (this.moreForm.landSizeList[0].minSize || this.moreForm.landSizeList[0].maxSize) {
          searchForm['landSizeList[0].minSize'] = this.moreForm.landSizeList[0].minSize;
          searchForm['landSizeList[0].maxSize'] = this.moreForm.landSizeList[0].maxSize;
        }

        // floor level
        if (this.moreForm.floorLevelId.length > 0 && (!(this.moreForm.floorLevelId[0] == 'Any'))) {
          let floorLevelList = []
          let floorLevelRangeList = []
          for(let i=0;i<this.moreForm.floorLevelId.length;i++){
            if(this.moreForm.floorLevelId[i] > 5){
              floorLevelList.push(this.moreForm.floorLevelId[i])
            }else if(this.moreForm.floorLevelId[i] <= 5){
              floorLevelRangeList.push(this.moreForm.floorLevelId[i])
            }
          }

          for(let i=0;i<floorLevelRangeList.length;i++){
            if (floorLevelRangeList[i] == 1) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '1'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '2'
            } else if (floorLevelRangeList[i] == 3) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '3'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = '4'
            } else if (floorLevelRangeList[i] == 5) {
              searchForm[`floorLevelRangeList[` + i + `].minLevel`] = '5'
              searchForm[`floorLevelRangeList[` + i + `].maxLevel`] = ''
            }
          }

          // 数组传递
          if(floorLevelList.length>0){
            searchForm.floorLevelList = floorLevelList.join(',')
          }
        }

        // furnishing
        if (this.moreForm.FurnishingId.length > 0 && (!(this.moreForm.FurnishingId[0] == 'Any'))) {
          searchForm.furnishingList = this.moreForm.FurnishingId.join(',')
        }

        // Building Age
        if (this.moreForm.BuildingAgeID.length > 0 && (!(this.moreForm.BuildingAgeID[0] == 'Any'))) {
          for (let i = 0; i < this.moreForm.BuildingAgeID.length; i++) {
            if (this.moreForm.BuildingAgeID[i] == 0) {
              searchForm[`ageList[` + i + `].minAge`] = ''
              searchForm[`ageList[` + i + `].maxAge`] = '5'
            } else if (this.moreForm.BuildingAgeID[i] == 1) {
              searchForm[`ageList[` + i + `].minAge`] = '5'
              searchForm[`ageList[` + i + `].maxAge`] = '10'
            } else if (this.moreForm.BuildingAgeID[i] == 2) {
              searchForm[`ageList[` + i + `].minAge`] = '10'
              searchForm[`ageList[` + i + `].maxAge`] = '20'
            } else if (this.moreForm.BuildingAgeID[i] == 3) {
              searchForm[`ageList[` + i + `].minAge`] = '20'
              searchForm[`ageList[` + i + `].maxAge`] = ''
            }
          }
        }

        // Facing
        if (this.moreForm.FacingID.length > 0 && (!(this.moreForm.FacingID[0] == 'Any'))) {
          searchForm.facingList = this.moreForm.FacingID.join(',')
        }

        // Source
        if (this.moreForm.SourceId && (this.moreForm.SourceId != 'Any')) {
          searchForm.activeType = this.moreForm.SourceId
        }

        // sort
        if(this.sortForm){
          searchForm.sort = this.sortForm
        }


        searchDevelopmentList(Object.assign(searchForm, this.pageData)).then((res) => {
          // this.tableData = res.data.data.object.list || []

          // 刷新列表 or 加载更多
          if (this.isRefresh) {
            window.scrollTo(0, 0)
            this.tableData = res.data.data.object.list || []
            this.isRefresh = false
          } else {
              this.tableData = this.tableData.concat(res.data.data.object.list)
          }

          // 分页信息配置
          this.pageInfo.totalPages = res.data.data.object.pages
          this.pageInfo.totalCount = res.data.data.object.total
          this.pageData.pageNum = this.pageData.pageNum + 1
          this.loading = false
        }).catch((e) => {
          console.log(e)
        })
      },
      loadMoreItems () {
        if (this.pageData.pageNum >= this.pageInfo.totalPages) return false
        this.loading = true
        setTimeout(() => {this.getList()},1000)
        // this.getList()
        return false
      },
      dateFormat (value, str) {
        if(!value){
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s
          return t
        } else {
          var ts = m + '-' + Y
          return ts
        }
      },
      getPrice(UnitsList,currencyId){
        // 1缅甸 3美元
        let minPrice = ''
        let minLksPrice = ''
        if(UnitsList&&UnitsList.length>0){
          let minPriceArr = [];
          let minLksPriceArr = [];
          for(let i=0;i<UnitsList.length;i++){
            let arr = [];
            let arrLks = [];
            if(UnitsList[i].price){
              arr.push(UnitsList[i].price)
            }
            if(UnitsList[i].price2){
              arr.push(UnitsList[i].price2)
            }
            if(UnitsList[i].price3){
              arr.push(UnitsList[i].price3)
            }
            if(arr.length>0){ // 3个price 中的最小值
              minPriceArr.push(Math.min(...arr))
            }

            if(currencyId == 3){
              if(UnitsList[i].lksPrice){
                arrLks.push(UnitsList[i].lksPrice)
              }
              if(UnitsList[i].lksPrice2){
                arrLks.push(UnitsList[i].lksPrice2)
              }
              if(UnitsList[i].lksPrice3){
                arrLks.push(UnitsList[i].lksPrice3)
              }
              if(arrLks.length>0){ // 3个Lks price 中的最小值
                minLksPriceArr.push(Math.min(...arrLks))
              }
            }
          }
          if(minPriceArr.length>0){ // 整个unit list中的最小值 只有缅甸元
            minPrice = Math.min(...minPriceArr)
          }
          if(minLksPriceArr.length>0){ // 整个unit list中的最小值 美元和缅甸元都有
            minLksPrice = Math.min(...minLksPriceArr)
          }
        }
        if(currencyId == 1 && minPrice){
          return this.regexNum(minPrice) + ' Lks'
        }else if(minPrice && currencyId == 3){
          return this.regexNum(minPrice) + ' USD'+ '(' + this.regexNum(minLksPrice) + ' Lks)'
        }else {
          return ''
        }

      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      translateZTUnicode(str){
        if (!str) return '';
        return this.$translateLang(str, 'zawgyiTounicode')
      },
    },
    computed: {
      buySortJson(){
        if (this.$store.state.localLang == 'MM') {
          return mm_buySort
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_buySort
        } else {
          return buySort
        }
      },
      propertyType() {
        if (this.$store.state.localLang == 'MM') {
          return mm_propertyType
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_propertyType
        } else {
          return propertyType
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_regions
        } else {
          return regions
        }
      },
      floorLevel() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ေျမညီထပ္", "value": 100},
            {"text": "ေျမညီထပ္ ထပ္ခိုးအပါ", "value": 103},
            {"text": "ထပ္ခိုး", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "ဒါဘာ (အမိုးေအာက္တိုက္ခန္း)", "value": 102},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Ground floor", "value": 100},
            {"text": "Ground floor with Mezzanine", "value": 103},
            {"text": "Mezzanine", "value": 101},
            {"text": "1-2", "value": 1},
            {"text": "3-4", "value": 3},
            {"text": "5+", "value": 5},
            {"text": "Penthouse", "value": 102},
          ]
        }
      },
      Furnishing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "ပရိေဘာဂ တပ္ဆင္ထားျခင္းမရွိပါ။", "value": 0},
            {"text": "အနည္းငယ္", "value": 1},
            {"text": "အျပည့္အစံု", "value": 2},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Unfurnished", "value": 0},
            {"text": "Partially", "value": 1},
            {"text": "Fully", "value": 2},
          ]
        }
      },
      BuildingAge() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "<5", "value": 0},
            {"text": "5-10", "value": 1},
            {"text": "10-20", "value": 2},
            {"text": ">20", "value": 3},
          ]
        }
      },
      Facing() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အေရွ႔အရပ္", "value": 0},
            {"text": "အေရွ႕ေတာင္အရပ္", "value": 1},
            {"text": "ေတာင္အရပ္", "value": 2},
            {"text": "အေနာက္ ေတာင္အရပ္", "value": 3},
            {"text": "အေနာက္အရပ္", "value": 4},
            {"text": "အေနာက္ေျမာက္အရပ္", "value": 5},
            {"text": "ေျမာက္အရပ္", "value": 6},
            {"text": "အေရွ႕ ေျမာက္အရပ္", "value": 7},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "East", "value": 0},
            {"text": "South East", "value": 1},
            {"text": "South", "value": 2},
            {"text": "South West", "value": 3},
            {"text": "West", "value": 4},
            {"text": "North West", "value": 5},
            {"text": "North", "value": 6},
            {"text": "North East", "value": 7},
          ]
        }
      },
      Source() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "အက်ိဳးေဆာင္မ်ား", "value": 0},
            {"text": "ပိုင္ရွင္မ်ား", "value": 1},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "Agent", "value": 0},
            {"text": "Owner", "value": 1},
          ]
        }
      },
      totalBedroomsJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "1", "value": 1},
            {"text": "2", "value": 2},
            {"text": "3", "value": 3},
            {"text": "4", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      masterBedroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      BathroomJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {"text": "အားလံုး", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        } else {
          return [
            {"text": "Any", "value": 'Any'},
            {"text": "0", "value": 0},
            {"text": "1+", "value": 1},
            {"text": "2+", "value": 2},
            {"text": "3+", "value": 3},
            {"text": "4+", "value": 4},
            {"text": "5+", "value": 5},
          ]
        }
      },
      options (){
        if(this.$store.state.localLang == 'MM'){
          return[
            {
              label: 'အိမ္ျခံေျမ အမည္',
              value: 'propertyName',
            },
            {
              label: 'လမ္း',
              value: 'Street'
            },
            {
              label: 'စာရင္းအမွတ္',
              value: 'ListingID'
            }
          ]
        }else {
          return [
            {
              label: 'Property name',
              value: 'propertyName',
            },
            {
              label: 'Street',
              value: 'Street'
            },
            {
              label: 'Listing ID',
              value: 'ListingID'
            }
          ]
        }

      },
      township(){
        if (this.$store.state.localLang == 'MM') {
          return mm_townships
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_townships
        } else {
          return townships
        }
      },
      townshipCurrent (){
        if(this.$store.state.localLang == 'MM'){
          return [{text: 'အားလံုး', value: 'Any'}]
        }else{
          return [{text: 'Any', value: 'Any'}]
        }
      },
      slots() {
        if(this.$store.state.localLang == 'MM'){
          return [
            {
              flex: 1,
              values: ['အားလံုး', 'တိုက္ခန္း', 'ကြန္ဒို', 'အိမ္', 'ေျမ', 'စီးပြားေရးႏွင့္ဆိုင္ေသာ'],
              className: 'slot1',
              textAlign: 'right'
            }, {
              divider: true,
              content: '-',
              className: 'slot2'
            }, {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ]
        }else{
          return [
            {
              flex: 1,
              values: ['Any', 'Apartment', 'Condo', 'House', 'Land', 'Commercial'],
              className: 'slot1',
              textAlign: 'right'
            }, {
              divider: true,
              content: '-',
              className: 'slot2'
            }, {
              flex: 1,
              values: [],
              className: 'slot3',
              textAlign: 'left'
            }
          ]
        }
      },
      propertySubType(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertySubType
        }else if(this.$store.state.localLang == 'MMU'){
          return mmu_propertySubType
        }else{
          return propertySubType
        }
      },
      PriceArr(){
        if(this.$store.state.localLang == 'MM'){
          return[
            {value: 'Any', text: 'အားလံုး'},
            {value: '99', text: '<100 Lks'},
            {value: '100', text: '100-200 Lks'},
            {value: '200', text: '200-300 Lks'},
            {value: '300', text: '300-400 Lks'},
            {value: '400', text: '400-500 Lks'},
            {value: '500', text: '500-600 Lks'},
            {value: '600', text: '600-700 Lks'},
            {value: '700', text: '700-800 Lks'},
            {value: '800', text: '800-900 Lks'},
            {value: '900', text: '900-1000 Lks'},
            {value: '1001', text: '>1000 Lks'},
          ]
        }else{
          return [
            {value: 'Any', text: 'Any'},
            {value: '99', text: '<100 Lks'},
            {value: '100', text: '100-200 Lks'},
            {value: '200', text: '200-300 Lks'},
            {value: '300', text: '300-400 Lks'},
            {value: '400', text: '400-500 Lks'},
            {value: '500', text: '500-600 Lks'},
            {value: '600', text: '600-700 Lks'},
            {value: '700', text: '700-800 Lks'},
            {value: '800', text: '800-900 Lks'},
            {value: '900', text: '900-1000 Lks'},
            {value: '1001', text: '>1000 Lks'},
          ]
        }
      },
    },
    mounted() {
      this.regionId = this.$store.state.regionId || 2;
      this.searchForm.RegionID = this.$store.state.regionId || 2;
      this.getList()
    },
  }
</script>

<style>
  .buy-page .mint-search {
    height: .6rem;
  }

  .buy-page .mint-searchbar {
    padding-top: .2rem;
    background-color: #fff;
  }

  .buy-page .mint-searchbar-inner {
    border: 1px solid #ccc;
  }

  .buy-page .mint-tabbar {
    background-color: #f2f2f2;
    height: .48rem;
  }

  .buy-page .mint-tabbar > .mint-tab-item.is-selected {
    background-color: #fff;
    color: #2c3e50;
  }

  .buy-page .mint-tab-item-label {
    font-size: 14px;
    line-height: .36rem;
  }
</style>

<style scoped>
  .header {
    width: 100%;
    height: .96rem;
    position: fixed;
    z-index: 100;
    background: #f2f2f2;
  }

  .header-input {
    height: .46rem;
    line-height: .46rem;
    text-align: center;
    position: relative;
  }

  .line-white {
    height: 2px;
    background: #fff;
  }

  .search-left {
    position: absolute;
    top: 0.02rem;
    right: 0;
    left: .05rem;
    bottom: 0;
    margin: auto 0;
  }

  .search-input {
    vertical-align: middle;
    width: 65%;
    height: .3rem;
    font-size: 16px;
    border: 1px solid #999;
  }

  .search-ifram {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #fff;
    width: 100%;
    height: 100%;
    display: block;
  }



  .btn-box {
    margin-top: .2rem;
    text-align: center;
  }

  .Back-btn {
    margin-right: .1rem;
  }



  .san-box {
    width: 0;
    height: 0;
    border-top: 6px solid black;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    display: inline-block;
    line-height: .32rem;
    margin-left: .05rem;
  }

  .township-box {
    height: 100%;
    overflow: auto;
    padding: 0;
    border: none;
  }

  .township-item {
    height: .34rem;
    border-bottom: 1px solid #ccc;
    line-height: .34rem;
    padding-left: .3rem;
    font-size: 16px;
  }

  .tab-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .reset-btn {
    width: 1rem;
    float: right;
    margin-right: .1rem;
  }

  .confirm-btn {
    float: right;
    width: 1rem;
    color: #fff!important;
    background: #ff8d00!important;
  }

  .price-box {
    height: .5rem;
    padding: .1rem;
  }

  .price-input {
    margin-top: .05rem;
    width: .4rem;
    height: .3rem;
    border: 1px solid #ccc;
  }

  .room-box {
    padding: .2rem;
  }

  .room-title {
    color: #000;
    padding-top: .15rem;
  }

  .total-rooms-item-box {
    height: .35rem;
    overflow: hidden;
    padding: 0;
    margin-bottom: .1rem;
  }

  .total-rooms-item {
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .08rem;
    border: 1px solid #ccc;
    min-width: .3rem;
    border-radius: 5px;
  }

  .total-rooms-item-ed {
    color: #fff;
    background: #ff8e00;
    border: 1px solid #ff8e00;
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    float: left;
    margin-right: .08rem;
    min-width: .3rem;
    border-radius: 5px;
  }

  .select-rooms-box {
    width: 100%;
    height: .4rem;
    padding-top: .2rem;
    text-align: center;
  }

  .select-rooms-bo-confirm {
    width: 1rem;
    background: #ff8e00!important;
    text-align: center;
    color: #fff!important;
    border-radius: 5px;
    margin: 0 auto;
  }


  /*往下列表样式*/
  .list-box {
    padding-top: .96rem;
  }
  .list-items {
    width: 100%;
    margin: 0 auto;
  }

  .list-items .el-table__row {
    cursor: pointer;
  }

  .list-items .el-table__row img {
    display: block;
    width: 180px;
    height: 135px;
  }

  .list-items .el-table__row p {
    /*margin: 22px 0;*/
  }
  .room-type{
    display: inline-block;
    line-height: 1.5;
    /*min-width:15%;*/
    /*max-width: 35%;*/
    width:38%;
  }
  .room-type-time{
    width:25%;
  }
  .room-type-box .price-currency {
    color: red;
  }
  .buy-img-box{
    padding:0 10px;
    display: inline-block;
    vertical-align: middle;
  }
  .buy-img-box .buy-img{
    width:114px;
    height:100px;
    vertical-align: middle;
  }
  .buy-info-box{
    padding:0 10px 0 0;
    display:block;
    word-wrap: break-word;
    overflow: hidden;
    flex: 2;
  }
  .buy-info-box p{
    margin:0;
    text-align: left;
    line-height: 1.5;
  }
  .buy-info-box p:first-child{
    margin-top:0;
  }
  .buy-list{
    padding:10px 0;
    border-bottom: 1px solid #ebeef5;
    color:#606266;
    cursor: pointer;
  }
  .buy-list:hover{
    background: #f5f7fa;
  }
  .buy-list-box{
    display: flex;
    margin-bottom:5px;
  }
  .room-type-box{
    padding:0 10px;
    text-align: left;
    /*margin-top:5px;*/
  }
  .line-form {
    border-top: 1px solid #eee;
  }
  .no-data{
    height:50px;
    line-height: 50px;
    color:#909399;
    text-align: center;
  }
  .loading-more{
    width:35px;
    display: inline-block;
  }
  img[lazy=loading] {
    margin: auto;
    background: #f0f0f0;
  }
  .loading-more-box{
    padding:10px 0;
    text-align:center;
  }
  .buy-info-box .title{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color:#2c3e50;
    overflow: hidden;
  }
  .price-currency {
    color: red;
  }
  .buy-info-box .price{
    font-size: 1.2em;
  }
  .text-a p{
    text-align: right;
  }

  .info-input {
    height: .3rem;
    border: 1px solid #ccc;
    width: 100%;
    outline:none;
  }
  .info-input-box {
    padding-top: .1rem;
    width: 80%;
    margin: 0 auto;
  }
  .location-item {
    height: .48rem;
    line-height: .48rem;
  }
</style>
